<template>
  <base-modal :title="$t('performance.title.performanceDetail')" :show.sync="visible" width="660px" class="base-import-modal" @closed="reset">

    <div class="table-wrap">
      <el-table
        stripe
        :data="detail">
        <el-table-column prop="taskNo" min-width="100px" :label="$t('common.form.type.taskNo')">
          <template slot-scope="scope">
            <a href="javascript:;" @click="viewTask(scope.row)" class="view-detail-btn">{{scope.row.taskNo}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="customer" min-width="100px" :label="$t('common.form.type.customer')">
          <template slot-scope="scope">{{scope.row.customer.name}}</template>
        </el-table-column>
        <el-table-column width="100px" :label="$t('component.bizBatch.formName')">
          <template slot-scope="scope">
            <template v-if="isOpenData && scope.row.staffId">
              <open-data type="userName" :openid="scope.row.staffId"></open-data>
            </template>
            <template v-else>
              {{scope.row.userName}}
            </template>  
          </template>
        </el-table-column>
        <el-table-column prop="userRole" width="70px" :label="$t('common.base.role')"></el-table-column>
        <el-table-column prop="ruleType" width="70px" :label="$t('performance.label.method')" ></el-table-column>
        <el-table-column prop="income" :label="$t('performance.label.result')" ></el-table-column>
      </el-table>
    </div>

    <div class="dialog-footer" style="margin-top: 15px;text-align: right;">
      <el-button type="primary" :disabled="pending" @click="exportDetail" v-if="isButtonDisplayed">{{$t('common.base.export')}}</el-button>
    </div>

    <div ref="bridge" class="base-export-bridge"></div>
  </base-modal>
    
</template>

<script>
import { isOpenData, openAccurateTab } from '@src/util/platform'
import { formatDate } from 'pub-bbx-utils';
import qs from '@src/util/querystring';
import { safeNewDate } from '@src/util/time';
import { checkButtonDisplayed } from '@src/util/dom';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'

export default {
  name: 'hit-rule-detail',
  data() {
    return {
      isOpenData,
      isButtonDisplayed: checkButtonDisplayed(),
      visible: false,
      pending: false,
      detail: [],
      tag: '',
    }
  },
  methods: {
    viewTask(row){
      let fromId = window.frameElement.getAttribute('id');

      // this.$platform.openTab({
      //   id: `taskView_${row.taskId}`,
      //   title: `工单${row.taskNo}`,
      //   close: true,
      //   url: `/task/view/${row.taskId}?noHistory=1`,
      //   fromId
      // })
      openAccurateTab({
        type: PageRoutesTypeEnum.PageTaskView,
        key: row.taskId,
        titleKey: row.taskNo,
        params: 'noHistory=1',
        fromId
      })
    },
    exportDetail() {
      this.pending = true;

      let model = {
        checked: `${this.detail.map(d => d.id).join(',') },`,
      };

      this.exportExcel(model);
    },
    exportExcel(model) {
      this.pending = true;
      let fileName = this.$t('performance.title.exportFileName', {date: formatDate(safeNewDate(), 'YYYY-MM-DD'), tag: this.tag});
      let ua = navigator.userAgent;
      if (ua.indexOf('Trident') >= 0){
        window.location.href = `/performance/v2/export/report/desc/detail?${qs.stringify(model)}`;
        this.visible = false;
      }

      this.$http.post(`/performance/v2/export/report/desc/detail`, model, false, {responseType: 'blob'}).then(blob => {
        let link = document.createElement('a');
        let url = URL.createObjectURL(blob);
        link.download = fileName;
        link.href = url;
        this.$refs.bridge.appendChild(link);
        link.click();
        this.visible = false;
        this.pending = false;
        setTimeout(() => {
          URL.revokeObjectURL(url);
          this.$refs.bridge.removeChild(link)
        }, 150);
      }).catch(err => {
        console.error(err);
        this.pending = false;
      })
    },
    toggleDialog(detail) {
      this.visible = !this.visible;

      if (detail) {
        this.detail = detail.desc;
        this.tag = detail.users;
      }
    },
    reset() {
      this.detail = [];
    }
  },
}
</script>

<style lang="scss">


.view-detail-btn {
  @include fontColor();
}

.table-wrap {
  max-height: 300px;
  overflow-y: auto;
}
</style>
